<template>
    <n-flex class="login-container" wh-full justify="center" align="center">
        <n-card w-800px content-class="!p-0" hoverable>
            <n-flex h-500px :size="0">
                <n-el flex-1 style="background-color: var(--primary-color)">
                    <n-space justify="center" align="center" h-full>
                        <n-icon :size="350">
                            <svg-icons-loginbg />
                        </n-icon>
                    </n-space>
                </n-el>
                <n-el flex-1>
                    <n-flex vertical wh-full justify="center" p-40px>
                        <n-space vertical justify="center" align="center">
                            <n-avatar :src="LogoImage" :size="120" />
                            <n-h2>EAM 资产管理系统</n-h2>
                        </n-space>
                        <n-el flex-1>
                            <n-form ref="formRef" :model="formData" :rules="rules" label-placement="left" size="large">
                                <n-form-item path="username">
                                    <n-input v-model:value="formData.username" clearable placeholder="请输入登录账号" />
                                </n-form-item>
                                <n-form-item path="password">
                                    <n-input
                                        type="password"
                                        v-model:value="formData.password"
                                        showPasswordOn="click"
                                        placeholder="请输入登录密码"
                                        clearable
                                    />
                                </n-form-item>
                                <n-form-item>
                                    <n-button :loading="authenticationStore.loading" block type="primary" @click="submitForm">登录</n-button>
                                </n-form-item>
                            </n-form>
                        </n-el>
                    </n-flex>
                </n-el>
            </n-flex>
        </n-card>
    </n-flex>
</template>

<script setup lang="ts">
import { LoginParams } from "@scpun/core";
import LogoImage from "/@/assets/images/logo.png";
import { useAuthenticationStore } from "/@/store/modules";

const formRef = ref();
const formData = reactive<LoginParams>({
    username: "",
    password: "",
});

const rules = computed(() => {
    return {
        username: [
            {
                required: true,
                message: "请输入登录账户",
                trigger: "blur",
            },
        ],
        password: [
            {
                required: true,
                message: "请输入登录密码",
                trigger: "blur",
            },
        ],
    };
});

const authenticationStore = useAuthenticationStore();

function submitForm() {
    formRef.value?.validate((errors: any) => {
        if (!errors) {
            authenticationStore.authLogin({
                ...formData,
            });
        }
    });
}
</script>
